<template>
    <div class="ml-16px mr-16px content-container">
        <div class="flex flex-center pt-30px pb-15px">
            <div class="flex steps">
                <div class="item" :class="{ 'step': state.stepIndex.includes(index)}" v-for="(item, index) in state.steps"
                    :key="index">
                    <p v-html="item.title"></p>
                    <span>{{ item.txt }}</span>
                </div>
            </div>
        </div>
        <div class="px-26px">
            <el-divider />
        </div>
        <div class="h-500px" v-loading="state.isLoading" v-if="state.isLoading"></div>
        <template v-else>
            <div v-show="state.step === 0">
                <Step1 :model-value="state.step" :rule-form="ruleForm" @update:model-value="handleStep" />
            </div>
            <div v-show="state.step === 1">
                <Step2 :model-value="state.step" :rule-form="ruleForm" @update:model-value="handleStep" @step-2-complete="handleStep2Data" />
            </div>
            <div v-show="state.step === 2">
                <Step3 :model-value="state.step" @update:model-value="handleStep" />
            </div>
        </template>
    </div>
</template>

<script setup lang="ts">
import { addArticleApi,getArticleAreaApi } from '@/api/b2b'
import Step1 from './components/Step-1.vue'
import Step2 from './components/Step-2.vue'
import Step3 from './components/Step-3.vue'

const state = reactive({
    step: 0,
    steps: [
        {
            title: '第<b>1</b>步',
            txt: '填写文章信息'
        },
        {
            title: '第<b>2</b>步',
            txt: '填写文章关键词'
        },
        {
            title: '第<b>3</b>步',
            txt: '提交成功'
        }
    ],
    stepIndex:[0],
    isLoading:true
})

const ruleForm = reactive({
    name: '',
    province: '',
    city: '',
    area:'',
    content:'',
    mainKeyword:'',
    keywords:new Array<string>(10).fill(''),
    source:''
})

async function handleStep2Data(){
    let replaceWords = ruleForm.keywords.filter(Boolean).join('/')
    const res:ResType = await addArticleApi({
        Title: ruleForm.name,
        Province: ruleForm.province,
        City: ruleForm.city,
        Detail: ruleForm.content,
        Keyword: ruleForm.mainKeyword,
        LKeyword: replaceWords,
        Reprint: ruleForm.source
    })
    if(res.code === 200){
        state.step = 2
        state.stepIndex.push(2)
        reset()
    }
}

async function reset(){
  //重置词
    ruleForm.name = ''
    ruleForm.content = ''
    ruleForm.keywords = new Array<string>(10).fill('')
    ruleForm.mainKeyword = ''
}

function handleStep(val:number){
    if(!val){
        state.step = 0
        state.stepIndex = [0]
    }else{
        // 找到要删除项的索引
        let index = state.stepIndex.findIndex(item => item === val);
        if (index !== -1) {
            state.step = val - 1
            state.stepIndex.splice(index, 1); // 从索引处删除一个元素
        }else{
            state.stepIndex.push(val)
            state.step = val
        }
    }
}

async function getArticleArea(){
    const res:ResType = await getArticleAreaApi()
    if(res.code === 200){
        state.isLoading = false
        ruleForm.source = res.data.Reprint
        ruleForm.province = res.data.province
        ruleForm.city = res.data.city
    }
}

onMounted(() => {
    getArticleArea()
})
</script>

<style lang="scss" scoped>

</style>